<template>
  <div class="labor-register">
    <n-statistic label="项目：" value="xxx项目" />
    <n-divider />
    <n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
      <n-form-item label="姓名" path="name">
        <n-input v-model:value="formValue.name" placeholder="请输入姓名" />
      </n-form-item>

      <n-form-item label="手机号码(用于登录)" path="mobile">
        <n-input v-model:value="formValue.mobile" />
      </n-form-item>

      <n-form-item label="选择班组" path="labor_team_id">
        <n-input v-model:value="formValue.labor_team_id" />
      </n-form-item>

      <div class="text-center">
        <n-button type="primary" @click="formSubmit">打卡</n-button>
      </div>
    </n-form>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { useMessage } from 'naive-ui';
  import { ResultEnum } from '@/enums/httpEnum';
  import { useRouter } from 'vue-router';
  const number: any = ref(useRouter().currentRoute.value.params.number);

  const rules = {
    name: {
      required: true,
      message: '请输入姓名',
      trigger: 'blur',
    },
    mobile: {
      required: true,
      message: '请输入联系电话',
      trigger: 'input',
    },
  };
  const formRef: any = ref(null);
  const message = useMessage();

  const formValue = reactive({
    name: '',
    mobile: '',
    labor_team_id: '',
    number: 0,
  });

  function formSubmit() {
    formRef.value.validate(async (errors) => {
      if (!errors) {
        console.log(errors);
      } else {
        message.error('验证失败，请填写完整信息');
      }
    });
  }

  const getData = async () => {
    // const response: any = await getNumberProject(formValue.number);
    // if (response.code === ResultEnum.SUCCESS) {
    //   response.data.price = parseFloat(response.data.price);
    //   Object.assign(formValue, response.data);
    // }
  };
  onMounted(() => {
    getData();
  });
</script>
<style lang="less" scoped>
  .labor-register {
    padding: 30px;
  }
</style>
